<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>帮帮任务</title>

<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/goods-detail.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/u-header.css"/>
<script type="text/javascript" src="js/goods-detail.js"></script>

<script>
$(document).bind('mobileinit',function(){
 $.mobile.changePage.defaults.changeHash = false;
 $.mobile.hashListeningEnabled = false;
 $.mobile.pushStateEnabled = false;
});
</script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
 	<div data-role="content" class="content" id="content">
 		<div class="user">
			<div class="face">
				<a href="javascript:void(0)">
					<img src="${user.headimgurl }"/>
				</a>
			</div>
			<div class="u-detail">
				<div class="u-info">
					<a href="javascript:void(0)">${user.nickName }</a>
					<a href="javascript:void(0)">
						<img src="images/g${level+1 }.png" />
					</a>
				</div>
				<span>${time }</span>
			</div>	
			<%-- <div class="price">
				<span class="new-p"><fmt:formatNumber
								value="${thing.cost}" type="currency" pattern="￥" /></span>
				<span class="old-p"><fmt:formatNumber
								value="${thing.originalCost}" type="currency"  /></span>
			</div>	 --%>	
		</div>
		<div class="u-content">
			<div class="text">
				<p>
				${Help.title}
				</p>
				<br/>
				<br/>
				${Help.task }
				<c:forEach items="${helpImageList}" var="img" varStatus="stuts">
				<img src="${img.path }" />
				</c:forEach>
			</div>
			<div class="reply">
				<div class="ass-like">	
					<a href="javascript:void(0)">
						<img src="images/assess.png">
						<span>
						${commentNum }
						</span>
					</a>				
					<%-- <a class="like" href="javascript:void(0)">
						<img src="${(isCollection eq true) ? 'images/likered.png':'images/like.png' }"/>
						<span>${collectionNum }</span>
					</a> --%>
				</div>
				<div class="o-face" id="o-face">
				<c:forEach items="${helpCommentList}" var="item" varStatus="stuts">
					<img  src="${item.user.headimgurl }"/>
				</c:forEach>
				</div>
			</div>
		</div>
		
		<!--评论-->
		<div class="comment">
		</div>

		<div data-role="footer" data-position="fixed" class="footer" id="footer" data-tap-toggle="false">
			<a href="javascript:void(0)" data-role="none">
				<img src="images/ass.png" />
				<p>留言</p>
			</a>
			<%-- <a href="javascript:void(0)" data-role="none">
				<img src="${(isCollection eq true) ? 'images/likered.png':'images/like1.png' }"/>
				<p>喜欢</p>
			</a> --%>
			<input class="inputText" type="text" placeholder="想对TA说点什么？" data-role="none" style="display:none"/>
			<input type="button" value="我想买" data-role="none" class="btnSend" style="float:right"/>
			<input type="button" value="留言" data-role="none" class="btnSend" style="float:right;display:none"/>
			
		</div>

 	</div>
 </div>	
</body>
<script>
$(function(){
	//留言
	var message = $("#footer ").children().eq(0);
	//var like = $("#footer ").children().eq(1);
	var input = $("#footer ").children().eq(1);
	//我想买
	var btn = $("#footer ").children().eq(2);
	//留言
	var btnMsg = $("#footer ").children().eq(3);
	//留言点击
	message.click(function(){
		//like.css('display', 'none');
		message.css('display', 'none');
		btn.css('display', 'none');
		
		btnMsg.css('display', '');
		input.css('display', '');
		input.focus();
	});
	//输入框焦点事件消失
	
	//加载留言
	function loadingMessage(index,size){
		 $.post("api/help/getComment.do",
				 {HELP_ID:'${Help.id}',PAGEINDEX:index,PAGESIZE:size},
				 function(result){
			    	if(result.STATUS=="OK"){
			    		var list = eval("("+result.RESULTLIST+")");
			    		var html ="<div class='comment-h'>热门留言（"+result.MSGNUM+"）</div>";
			    		var comment = $(".comment");
			    		comment.html("");
			    		$.each(list,function(keyDaily,valueDaily){
							html += "<div class='comment-c'>"; 
							html += "<div class='o-u-face'>";
							html += "<img src='"+valueDaily.HEADIMGURL+"'/>";
							html += "</div>";
							html += "<div class='o-u-detail'>";
							html += "<div class='o-u-info'>";
							html += "<p>"+valueDaily.NICKNAME+"</p>";
							html += "<span>"+valueDaily.TIME+"</span>";
							html += "</div>";
							html += "<div class='o-u-text'>"+valueDaily.CONTENT+"</div>";
							html += "</div>";
							html += "</div>";
						});
			    		comment.append(html);
			    	}
			  	},'json');
	}
	loadingMessage(0,10);
	//添加留言
	function addMsg(to,msg,help){
		$.post("api/help/addComment.do",
				 {HELP_ID:help,FROM_USER:'${sessionUser.id}',TO_USER:to,CONTENT:msg},
				 function(result){
			    	if(result.STATUS=="OK"){
			    		loadingMessage(0,10);
			    		input.val("");
			    		var span= $(".ass-like a:eq(0)").find("span");
			    		span.html(parseInt(span.html())+1);
			    	}
			  	},'json');
	}
	//按钮点击事件
	btnMsg.click(function(){
		console.log(input.val());
		addMsg('${Help.user.id}',input.val(),'${Help.id}');
		//like.css('display', '');
		message.css('display', '');
		btn.css('display', '');
		
		btnMsg.css('display', 'none');
		input.css('display', 'none');
	});
	/* function collection(isCollection){
		$.post("api/index/CollectionThing.do",
				 {THING_ID:'${thing.id}',isCollection:isCollection},
				 function(result){
			    	if(result.STATUS=="OK"){
			    		//关注
			    		if(isCollection){
			    			like.find("img").attr("src","images/likered.png")
			    		}else{
			    			like.find("img").attr("src","images/like1.png")
			    		}
			    	}
			  	},'json');
	} */
	/* //关注
	like.click(function(){
		
		var src = $(this).find("img").attr("src");
		//未关注
		if(src == "images/like1.png"){
			collection(true);
		}else{
			collection(false);
		}
	}) */
	
	//我想买
	btn.click(function(){
		 $.post("api/chat/newChat.do",
				 {helpId:'${Help.id}'},
				 function(result){
			    	if(result.STATUS=="OK"){
			    		window.location.href="api/chat/withThing.do?CHATGROUPID="+result.GROUPID;
			    	}
			  	},'json'); 
	});
	
});
	

</script>
</html>